<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组处理</title>
</head>
<body>
<div id="app">
    <div>
        <span>
            <input type="text" v-model="fname">
            <button @click="unshift">添加元素到开头</button>
            <button @click="add">添加单个元素到最后</button>
            <button @click="del_first">删除第一个元素</button>
            <button @click="del_last">删除最后一个元素</button>
            <button @click="change">替换</button>
            <button @click="reverse">反转</button>
        </span>
    </div>
    <ul>
        <li :key="index" v-for="(item,index) in list">
            {{item}}
        </li>
    </ul>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    /*
        数组处理
     */
    var vm = new Vue({
        el: "#app",
        data: {
            fname: "",
            list: ["apple", "orange", "banana"]
        },
        methods: {
            add: function () {
                this.list.push(this.fname);
                this.fname = "";
            },
            unshift: function () {
                this.list.unshift(this.fname);
                this.fname = "";
            },
            del_first: function () {
                this.list.shift();
            },
            del_last: function () {
                this.list.pop();
            },
            change: function () {
                this.list = this.list.slice(0, 2);
            },
            reverse: function () {
                this.list.reverse();
            }
        }
    })
</script>
</body>
</html>
